<template>
    <div style="margin:10px;width: 98%;text-align: center;height: 100%;overflow:auto;background-color: white">
        <Spin fix v-if="noticeSkip"></Spin>
        <Row :gutter="16" style="margin:10px;height: 360px">
            <i-col span="12" v-for="(item,index) in lists">
                    <div class="top_common_title">
                        <div class="top_common_title_left">
                            <img class="top_common_title_left_icon" style="width: 25px;height: 25px" :src="item.iconUrl"/>
                            <span class="top_common_title_left_title">{{item.name}}</span>
                            <!--<p style="border-bottom:2px solid #d80200;"></p>-->
                        </div>
                        <router-link class="top_common_title_right" :to="{path:'/wholePage',query:{name: item.name,type: '3',id:item.id}}">更多></router-link>
                    </div>
                    <div class="down_info">
                        <p class="down_red_line_11"></p>
                        <p class="down_red_line_1"></p>
                    </div>
                    <div class="top_left_swiper" style="width: 95%;margin-left: 15px">
                        <Tabs value="name1">
                            <TabPane style="font-size: 14px" v-for="child in item.children" :label="child.title" :name="child.name">
                                <div class="top_artical_div">
                                    <ul class="articals" v-for="file in child.files">
                                        <li class="artical">
                                            <div class="articals_child">
                                                <router-link class="articals_child_title" target="_blank" :to="{path:'/noticeDetail',query:{id:file.id,name:file.name,createDate:file.createDateStr,type:1}}">{{file.name}}</router-link>
                                                <!--<a @click="downloadFile(file)" class="articals_child_title">{{file.name}}</a>-->
                                                <p class="articals_child_date">{{file.createDateStr}}</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </TabPane>
                        </Tabs>
                    </div>
            </i-col>

          <!--  <div class="down_info">
                <p class="down_red_line_4">一</p>
            </div>-->
        </Row>
    </div>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage, cookie} from '../../../common/cacheUtils.js';

    export default {
        data() {
            return {
                noticeSkip:true,
                currentPage: 1,
                lists: [],
            }
        },
        mounted() {
            this.ziliaoAll({id: '-1'});
        },
        methods: {
            ziliaoAll(map) {
                this.$http.get(Api.materialsCategory, {params: {parentId: map.id}}).then((res) => {
                    if (map.id == '-1') {
                        for (let i in res.data) {
                            res.data[i].name = res.data[i].title
                            if (i > 6) {
                                res.data[i].iconUrl = this.Common.ziliaoPng[i % 6]
                            } else {
                                res.data[i].iconUrl = this.Common.ziliaoPng[i]
                            }
                            this.lists = res.data
                            this.ziliaoAll(this.lists[i])
                        }
                    } else {
                        if (res.data.length > 0) {
                            res.data[0].name='name1'
                        }
                        map.children = res.data
                    }
                    this.noticeSkip=false
                    console.log(this.lists)
                })
            },


            downloadFile(file) {
                this.fileUrl = Api.uploadPTWFiles + '/' + file.id + '/files/doc';
                this.$http.get(this.fileUrl,{
                    params: {},
                }).then((res) => {
                    if(res.data.result == "success"){
                        if(res.data.data.length != 0){
                            // this.docFile = res.data.data[0];
                            // this.docName = res.data.data[0].fileName;
                            console.log( res.data.data[0].id)
                            this.$Modal.confirm({
                                title: '文件下载',
                                content: '<p>是否确定下载</p>',
                                okText: '确认',
                                onOk: () => {
                                    this.$http.get(Api.uploadPTWFiles + '/file/' + res.data.data[0].id, {
                                        responseType: 'blob'      //告诉服务器我们需要的响应格式
                                    }).then((res1) => {
                                        console.log(res1)
                                        const aLink = document.createElement("a");
                                        let blob = new Blob([res1.data], {
                                            type: res1.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                                        });
                                        aLink.href = URL.createObjectURL(blob)
                                        aLink.download = res.data.data[0].fileName //标题
                                        aLink.click()
                                        document.body.appendChild(aLink)
                                    })
                                }
                            });
                        }
                    }
                })


            },

            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>
    /*@import '../../../index.css';*/

    .top_common_title{
        /*background-image: url("../../assets/bbmg/safe/title_bg.png");*/
        background-repeat: no-repeat;
        height: 40px;
        display: flex;
        width:100%;
        /*border-bottom:5px solid #fea6a5;*/
        justify-content: space-between;
    }

    .top_common_title_left {
        display: flex;
        align-items: center;
        height: 40px;
    }

    .top_common_title_left_icon {
        margin-left: 18px;
        width: 30px;
        height: 30px;
    }

    .top_common_title_left_title {
        margin-left: 10px;
        width: 70px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #E43534;
    }

    .top_common_title_right {
        width: 40px;
        height: 30px;
        font-size: 14px;
        margin-right: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #E43534;
        line-height: 40px;
    }

    .down_info {
        display: flex;
        /*flex-direction: column;*/
        align-items: center;
        width: 97%;
    }
    .down_red_line_11 {
        /*border-bottom:2px solid #d80200;*/
        width: 22%;
        height: 2px;
        margin-left: 12px;
        background-color: #d80200;
    }
    .down_red_line_1 {
        /*margin-top: 3px;*/
        width: 84%;
        height: 2px;
        color: white;
        background-color: #dfdfdf;
    }


    .down_red_line_4 {
        margin-top: 48px;
        width: 96%;
        height: 4px;
        color: white;
        background-color: red;
    }


    .top_artical_div{
        background-color:#fff;
    }

    .top_artical_div ul {
        list-style-type: none;
    }

    .top_artical_div ul li:before{
        display: inline-block;
        content: "▶";
        padding-right: 10px;
        color: #FEA6A5;
        font-size:6px;
        line-height: 32px;
        margin-left: 10px;
    }

    ul li:first-child{
        /*display: inline-block;*/
        content: "▶";
        padding-right: 10px;
        color: #FEA6A5;
        font-size:6px;
        line-height: 32px;
    }
    .top_left_swiper{
        height: 330px;
        width: 100%;
        display: flex;
        font-size: 14px;
        flex-direction: column;
    }
    .artical{
        margin-left: 15px;
        display: flex;
    }

    .articals_child{
        width:96%;
        display: flex;
        justify-content: space-between;
    }

    .articals_child_title{
        flex:auto;
        width:0;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5C5C5C;
        line-height: 30px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
        text-align: left;
    }
    .articals_child_date{
        margin-left: 10px;
        width: 95px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #A3A3A3;
        flex-shrink:0;
        line-height: 32px;
    }
    .articals_child:hover .articals_child_date,.articals_child:hover .articals_child_title:hover{
        cursor: pointer;
        color: #F65555;
    }
    >>>[data-v-0d5fe2ca] .ivu-tabs-nav .ivu-tabs-tab-active {
        color: #F65555;
    }
    >>>.ivu-tabs-nav .ivu-tabs-tab:hover {
        color: #F65555;
    }
    >>> .ivu-tabs-bar {
        border-bottom: 0 solid #dcdee2;
        margin-bottom: 10px;
    }
    >>> .ivu-tabs-ink-bar {
        height: 2px;
        box-sizing: border-box;
        background-color: white;/*#F65555*/
        position: absolute;
        left: 0;
        bottom: 1px;
        z-index: 1;
        transition: transform .3s ease-in-out;
        transform-origin: 0 0;
    }

    >>> .ivu-tabs-nav .ivu-tabs-tab {
        display: inline-block;
        padding: 4px 2px 1px 8px;
        margin-right: 16px;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        position: relative;
        transition: color .3s ease-in-out;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #757575;
        line-height: 40px;
    }
</style>